// Colors
@default-color: #1B97FF;
@white: #ffffff;
@dark-white: #fafafa;

@blue: #1A98FF;
@lightblue: #50bfff;
@black: #222222;
@light-black: #48576a;
@orange: #f7ba2a;
@green: #13ce66;
@red: #ff4949;
@gray: #999999;
@base-gray: #d1dbe5;
@extra-light-gray: #eef1f6;
@light-gray: #e4e8f1;
@gray-alto: #dbdbdb;
@dark-white: #fbfdff;
@extra-light-black: #48576a;
@base-silver: #8391a5;
@light-silver: #97a8be;
@extra-light-silver: #97a8be;

@colors: blue, lightblue, green, gray, red;

@color-primary: @default-color;
@color-success: @green;
@color-warning: @orange;
@color-info: @lightblue;
@color-danger: @red;
@color-error: @red;

@link-color: @default-color;
@link-hover-color: @lightblue;
@link-active-color: @lightblue;

@disabled-color: #bfcbd9;
@disabled-border: #d1dbe5;
@disabled-bg: #eef1f6;

@border-base: 1px solid #bfcbd9;
@border-color-base: #bfcbd9;
@border-radius-base: 4px;
@border-radius-small: 2px;
@border-color-hover: #8391a5 + 10;
@disabled-border-base: #d1dbe5;
@border-radius-circle: 50%;

@box-shadow-base: 0 2px 3px rgba(0, 0, 0, .12), 0 0 5px rgba(0, 0, 0, .04);
@box-shadow-dark: 0 2px 3px rgba(0, 0, 0, .12), 0 0 5px rgba(0, 0, 0, .12);

// Font
@font-size-base: 13px;
@font-color: #222222;

// Zindex
@index-normal: 1;
@index-top: 1000;
@index-popper: 2000;

// Button
@button-default: @default-color;

@button-primary: @default-color;
@button-success: @green;
@button-info: @lightblue;
@button-warning: @orange;
@button-danger: @red;
@button-link: transparent;

@button-radius: 4px;

@button-default-color: @black;
@button-default-fill: @white;
@button-default-border: #c4c4c4;

@button-disabled-color: @extra-light-silver;
@button-disabled-fill: @extra-light-gray;
@button-disabled-border: @disabled-border-base;

@button-font-size: @font-size-base;
@button-border-radius: @border-radius-base;
@button-padding-vertical: 10px;
@button-padding-horizontal: 15px;

@button-large-font-size: 16px;
@button-large-padding-vertical: 11px;
@button-large-padding-horizontal: 19px;

@button-small-font-size: 12px;
@button-small-padding-vertical: 7px;
@button-small-padding-horizontal: 9px;

@button-mini-font-size: 12px;
@button-mini-padding-vertical: 4px;
@button-mini-padding-horizontal: 4px;

// Checkbox
@checkbox-border: 1px solid #bfcbd9;
@checkbox-border-hover: 1px solid @default-color;
@checkbox-border-radius: 4px;

// Radio
@radio-border: 1px solid #bfcbd9;
@radio-border-hover: 1px solid @default-color;
@radio-border-radius: 50%;
@radio-font-size: @font-size-base;

@radio-button-font-size: @font-size-base;
@radio-button-checked-fill: @color-primary;
@radio-button-checked-color: @white;
@radio-button-checked-border-color: @color-primary;

// Side Menu
@side-menu-bg: #1E2B36;
@side-menu-hover-bg: #253544;
@side-menu-subitem-bg: #15222d;
@side-menu-subitem-hover-bg: #1F2F3E;
@side-menu-subitem-active-bg: #0c161e;
@side-menu-font-color: #ffffff;
@side-menu-item-height: 50px;
@side-menu-subitem-height: 46px;
@side-menu-item-padding: 24px;

// Alert
@alert-padding: 10px 16px;
@alert-border-radius: 4px;
@alert-title-font-size: 13px;
@alert-icon-size: 16px;
@alert-icon-large-size: 28px;
@alert-description-font-size: 12px;
@alert-close-font-size: 12px;
@alert-close-customed-font-size: 13px;

// Toggle
@toggle-on-color: @default-color;
@toggle-off-color: @gray;
@toggle-disabled-color: @gray;
@toggle-disabled-text-color: @white;

@toggle-font-size: @font-size-base - 1;
@toggle-core-border-radius: 12px;
@toggle-width: 46px;
@toggle-height: 22px;
@toggle-button-size: 16px;

// Progress bar
@zindex-progress-bar: 99999;

// Input
@input-font-size: @font-size-base;
@input-color: @font-color;
@input-width: 140px;
@input-height: 33px;
@input-border: @border-base;
@input-border-color: @border-color-base;
@input-border-radius: @border-radius-base;
@input-border-color-hover: @border-color-hover;
@input-fill: @white;
@input-fill-disabled: @disabled-bg;
@input-color-disabled: @disabled-color;
@input-icon-color: #bfcbd9;
@input-placeholder-color: #bfcbd9;
@input-max-width: 314px;

@input-hover-border: @border-color-hover;

@input-focus-border: @default-color;
@input-focus-fill: @white;

@input-disabled-fill: @disabled-bg;
@input-disabled-border: @disabled-border;
@input-disabled-color: @disabled-color;
@input-disabled-placeholder-color: #bfcbd9;

@input-large-font-size: 16px;
@input-large-height: 42px;

@input-small-font-size: 13px;
@input-small-height: 30px;

@input-mini-font-size: 12px;
@input-mini-height: 22px;

// Toast
@toast-shadow: @box-shadow-base;
@toast-padding: 10px 12px;
@toast-content-color: @border-color-hover;
@toast-close-color: @extra-light-silver;
@toast-close-hover-color: @light-silver;

@toast-success-color: @color-success;
@toast-info-color: @color-info;
@toast-warning-color: @color-warning;
@toast-danger-color: @color-danger;

// Modal
@modal-width: 420px;
@modal-border-radius: 3px;
@modal-font-size: 14px;
@modal-content-font-size: 14px;
@modal-content-color: rgba(0, 0, 0, .5);
@modal-error-font-size: 12px;

@modal-success-color: @color-success;
@modal-info-color: @color-info;
@modal-warning-color: @color-warning;
@modal-danger-color: @color-danger;

// Tag
@tag-padding: 0 5px;
@tag-fill: @border-color-hover;
@tag-color: @white;
@tag-close-color: #666;
@tag-font-size: 12px;
@tag-border-radius: 4px;

@tag-gray-fill: @light-gray;
@tag-gray-border: @light-gray;
@tag-gray-color: @link-color;

@tag-primary-fill: rgba(32,160,255,.1);
@tag-primary-border: rgba(32,160,255,.2);
@tag-primary-color: @color-primary;

@tag-success-fill: rgba(18,206,102,0.10);
@tag-success-border: rgba(18,206,102,0.20);
@tag-success-color: @color-success;

@tag-warning-fill: rgba(247,186,41,0.10);
@tag-warning-border: rgba(247,186,41,0.20);
@tag-warning-color: @color-warning;

@tag-danger-fill: rgba(255,73,73,0.10);
@tag-danger-border: rgba(255,73,73,0.20);
@tag-danger-color: @color-danger;

// Scrollbar
@scrollbar-background-color: rgba(151, 168, 190, .3);
@scrollbar-hover-background-color: rgba(151, 168, 190, .5);

// Select
@select-border-color-hover: @border-color-hover;
@select-disabled-border: @disabled-border-base;
@select-font-size: @font-size-base;
@select-close-hover-color: @light-silver;

@select-input-color: @extra-light-silver;
@select-multiple-input-color: #666666;
@select-input-focus-background: @color-primary;
@select-input-font-size: 12px;

@select-tag-height: 24px;
@select-tag-color: @white;
@select-tag-background: @color-primary;

@select-option-color: @link-color;
@select-option-disabled-color: @extra-light-silver;
@select-option-disabled-background: @white;
@select-option-height: 36px;
@select-option-hover-background: @light-gray;
@select-option-selected: @color-primary;
@select-option-selected-hover: @color-primary - 10;

@select-group-color: #999999;
@select-group-height: 30px;
@select-group-font-size: 12px;

@select-dropdown-background: @white;
@select-dropdown-shadow: @box-shadow-base;
@select-dropdown-empty-color: #999999;
@select-dropdown-max-height: 274px;
@select-dropdown-padding: 6px 0;
@select-dropdown-empty-padding: 10px 0;
@select-dropdown-border: 1px solid @disabled-border-base;

// Pagination
@pagination-font-size: 13px;
@pagination-fill: @white;
@pagination-color: @link-color;
@pagination-border-radius: 2px;
@pagination-button-color: @light-silver;
@pagination-button-size: 28px;
@pagination-button-disabled-color: #e4e4e4;
@pagination-button-disabled-fill: @white;
@pagination-border-color: @disabled-border-base;
@pagination-hover-fill: @color-primary;
@pagination-hover-color: @white;

// Dialog
@dialog-background-color: @white;
@dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@dialog-tiny-width: 30%;
@dialog-small-width: 50%;
@dialog-large-width: 90%;
@dialog-close-color: @extra-light-silver;
@dialog-close-hover-color: @color-primary;
@dialog-title-font-size: 16px;
@dialog-font-size: 14px;

// Tooltip
@tooltip-fill: @black;
@tooltip-color: @white;
@tooltip-font-size: 12px;
@tooltip-border-color: @black;
@tooltip-arrow-size: 6px;
@tooltip-padding: 10px;

// Table
@table-border-color: #E0E6ED;
@table-text-color: #333333;
@table-header-background: #FAFCFF;
@table-hover-background: #FAFCFF;
@table-footer-background: @dark-white;

// Dropdown
@dropdown-menu-box-shadow: @box-shadow-dark;
@dropdown-menuItem-hover-fill: @light-gray;
@dropdown-menuItem-hover-color: @link-color;

// Avatar
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #E0E6ED;
@avatar-color: #ffffff;
@avatar-border-radius: @border-radius-small;

// Datepicker
@datepicker-color: @link-color;
@datepicker-off-color: #dddddd;
@datepicker-header-color: @border-color-hover;
@datepicker-icon-color: @light-silver;
@datepicker-border-color: @disabled-border-base;
@datepicker-inner-border-color: #e4e4e4;
@datepicker-cell-hover-color: @light-gray;
@datepicker-inrange-color: #d2ecff;
@datepicker-inrange-hover-color: #d2ecff;
@datepicker-active-color: @color-primary;
@datepicker-text-hover-color: @color-primary;

// Transition
@all-transition: all .3s cubic-bezier(.645,.045,.355,1);
@fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
@fade-linear-transition: opacity 200ms linear;
@md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
@border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
@color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);

@transition-time: .2s;


// Notification

@color-text-regular: #606266;
@color-text-secondary: #909399;
@notification-width: 330px;
@notification-padding: 14px 26px 14px 13px;
@notification-raduis: 8px;
@notification-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@notification-border-color: #ebeef5;
@notification-icon-size: 30px;
@notification-close-font-size: 14px;
@notification-group-margin: 13px;
@notification-font-size: @font-size-base;
@notification-color: @color-text-regular;
@notification-title-font-size: 15px;
@notification-title-color: @black;

@notification-close-color: @color-text-secondary;
@notification-close-hover-color: @color-text-regular;

@notification-success-color: @color-primary;
@notification-info-color: @color-info;
@notification-warning-color: @color-warning;
@notification-danger-color: @color-danger;
